<template>
	<view class="content">
		
		
		<u-sticky offset-top="-90">
			<uni-nav-bar :border="false" left-icon="back" left-text="返回" @clickLeft="backLastPage" class="nav-bar" right-text="搜索">
				<block slot="default">
					<view class="input-search">
						<input type="text" placeholder="输入关键字">
					</view>
				</block>
			</uni-nav-bar>
			
			
			
			
			<u-dropdown class="" active-color="#4CD964" :border-bottom="true" style="background-color: #FFFFFF;"> 
				<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="星级" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value1" title="价格" :options="options1"></u-dropdown-item>
			
			</u-dropdown>
		</u-sticky>
		
		
		<view class="hotel-list">
			<view class="hotel" v-for="item, index in hotelsResult" :key="index" @click="gotoHotelDeatil(item)">
				
				<view class="hotel-waik">
					<view class="left-img">
						<image src="../../users/static/wechat_login.png" mode="aspectFill"></image>
					</view>
					
					<view class="right-content">
						<view class="hotel-name">
							{{item.name}}
						</view>
						<view class="hotel-comment">
							{{item.comment}}
						</view>
						
						<view class="hotel-distance">
							<text>距您直线距离</text>
							<text>{{item.distance}}</text>
							<text>公里</text>
						</view>
						
						<view class="hotel-function">
							<!-- <text v-for="mark, index in item.functions" :key="mark.id">{{mark.mark}}</text> -->
							<u-tag class="u-m-r-10" v-for="mark, index in item.functions" :text="mark.mark" type="success" :key="index"/>
						</view>
						<view class="hotel-end">
							
							<view class="hotel-nums">
								<text>剩余低价房间</text>
								<text>{{item.nums}}</text>
							</view>
							<view class="hotel-price">
								<text class="hotel-text">起</text>
								<text class="hotel-num">{{item.price}}</text>
								
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			

			this.choiceDate = options.choiceDate
			this.searchKey = options.searchKey
		},
		data() {
			return {
				
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '一星级',
						value: 1,
					},
					{
						label: '二星级',
						value: 2,
					},
					{
						label: '三星级',
						value: 3,
					}
				],
				
				
				
				
				choiceDate: null,
				searchKey: '',
				hotelsResult: [
					{
						id: 10001,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
					{
						id: 10002,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
					{
						id: 10003,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
					{
						id: 10004,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
					{
						id: 10005,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
					{ 
						id: 10006,
						name: '神州佳酒店',
						comment: '4.9太好了',
						distance: 4.8,
						functions: [
							{
								id: 1,
								mark: '有wifi',
							},
							{
								id: 2,
								mark: '有浴缸',
							},
							{
								id: 3,
								mark: '地下停车位',
							}
						],
						nums: 2,
						price: 71,
						
						img: '',
					},
				],
				
				
			}
		},
		onReachBottom() {
			let obj = this.hotelsResult[this.hotelsResult.length - 1]
			for (let i = 0; i < 10; ++ i) {
				obj.id += i;
				
				this.hotelsResult.push(obj)
			}
		},
		methods: {
			gotoHotelDeatil(item) {
				// console.log(123)
				console.log(item)
				
				uni.navigateTo({
					url:'/pages/hotel/hotelDeatil/hotelDeatil?id=' + 4
				})
			},
			// 返回上一页
			backLastPage() {
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $u-bg-color;
	}
	.content {
		.nav-bar {
			
			
			.input-search {
				background-color: #f4f4f4;
				width: 100%;
				height: 60rpx;
				border-radius: 30rpx;
				
				display: flex;
				align-items: center;
				padding-left: 40rpx;
				
			}
		}
		
		width: 750rpx;
		position: relative;
		.navbar {
			// position: absolute;
			.search-content {
				width: 100%;
				height: 60rpx;
				border-radius: 50rpx;
				// background-color: #4CD964;
				border: 1rpx solid #C0C0C0;
				
				display: flex;
				align-items: center;
				justify-content: space-around;
				image {
					width: 35rpx;
					height: 35rpx;
				}
			}
		}
		
		.hotel-list {
			// margin: 0 20rpx;
			width: 100%;
			// margin-top: 160rpx;
			padding: 0 20rpx;
			.hotel {
				width: 100%;
				height: 300rpx;  
				background-color: #FFFFFF;
				// background-color: #000000;
				
				margin-top: 20rpx;
				// border-top: 2rpx solid #C8C7CC;
				.hotel-waik {
					// width: 100%;
					margin: 10rpx 20rpx;
					height: 100%;
					line-height: 45rpx;
					display: flex;
					align-items: center;
					
					.left-img {
						width: 30%;
						height: 90%;
						
						// background-color: #1AAD19;
						
						image {
							// margin: 10rpx 5rpx;
							height: 100%;
							width: 100%;
							border-radius: 20rpx;
						}
					} 
					.right-content {
						flex: 1;
						height: 100%;
						
						// background-color: #007AFF;
						margin-left: 20rpx;
						margin-top: 5%;
						.hotel-name {
							font-size: 35rpx;
							font-weight: 700;
						}
						
						.hotel-comment {
							font-size: 30rpx;
							color: #007AFF;
							font-weight: 700;
						}
						
						.hotel-distance {
							font-size: 28rpx;
							color: #C0C0C0;
						}
						
						.hotel-function {
							
							
							
							text {
								// margin: 0 10rpx;
								margin-right: 10rpx;
								border-radius: 10rpx;
								border: 1rpx solid #C0C0C0;
								font-size: 20rpx;
							}
						}
						
						.hotel-end {
							width: 100%;
							display: flex;
							align-items: baseline;
							margin-top: 10rpx;
							.hotel-price {
								width: 20%;
								display: flex;
								flex-direction: row-reverse;
								align-items: baseline;
								.hotel-num {
									font-size: 40rpx;
									color: red;
								}
								
								.hotel-text {
									margin-left: 5rpx;
									font-size: 25rpx;
									font-weight: 700;
									color: #C0C0C0;
								}
								
							}
							
							.hotel-nums {
								flex: 1;
								font-size: 25rpx;
								color: #007AFF;
								
								text:nth-child(2) {
									margin-left: 5rpx;
									font-size: 30rpx;
								}
							}

						}
						
					}
				}
				
				
				
			}
		}
	}
</style>
